<template>
  <div class="left-container">
    <h2>Left</h2>
    <p>{{ age }}</p>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data () {
    return {
      age: 20
    }
  },
  // beforeCreate
  beforeCreate () {
    console.log('beforeCreate', this.age)
  },
  // created
  created () {
    console.log('created', this.age)
  },
  // beforeMount
  beforeMount () {
    console.log('beforeMount', document.querySelector('h2'))
  },
  // mounted
  mounted () {
    console.log('mounted', document.querySelector('h2'))
  }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
